{% extends 'portal/base.html' %}
{% load static %}
{% load mytags %}
{% block title %}密码条目管理{% endblock %}

{% block css %}
    <link href="{% static 'index.css' %}" rel="stylesheet">
{% endblock %}


{% block content %}
    <section class="content-header">
    <h1>
        密码条目
        <small>Item List</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">密码条目</li>
    </ol>
    <hr />
    </section>

    <section class="content">
        <div class="row" style="margin-bottom: 20px">
            <a id="item_create" style="margin-left: 15px" class="btn btn-success" href="{% url 'dashboard:item' %}">新增</a>
        </div>
        <div class="table-responsive">
            <table id="item_table" class="my_table table table-hover table-bordered table-striped">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>名字</th>
                        <th>所属组</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>URL</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in object_list %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ item.title }}</td>
                            <td>{{ item.group.name }}</td>
                            <td>
                                <p data-role="username" data-clipboard-text="{{ item.username }}">{{ item.username }}</p>
                            </td>
                            <td>
                                <p data-role='passwd' data-clipboard-text="{{ item.password|passwd2str }}">{{ item.password|pwd2fake }}</p>
                            </td>
                            <td>
                                <p data-role="url" data-clipboard-text="{{ item.url }}">{{ item.url }}</p>
                            </td>
                            <td>{{ item.comment }}</td>
                            <td>
                                <span class="hidden">{{ item.id }}</span>
                                <button type="button" data-toggle="modal"
                                        data-role="btn-cn-fields"
                                        class="btn btn-success" item_id="{{ item.id }}" >EntryFields</button>
                                <a href="{% url 'dashboard:item'%}?id={{ item.id }}"><button type="button" class="btn btn-warning" >编辑</button></a>
                                <button type="button" data-role="delete-item" id="{{ item.id }}" class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
      </div>

    </section>

{% endblock %}

{% block script %}

    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'clipboard.min.js' %}"></script>
    <script>
        $(function () {
            $('#item_table').DataTable({
              "paging": true,       <!-- 允许分页 -->
              "lengthChange": true, <!-- 允许改变每页显示的行数 -->
              "searching": true,    <!-- 允许内容搜索 -->
              "ordering": true,     <!-- 允许排序 -->
              "info": true,         <!-- 显示信息 -->
              "autoWidth": true
            });
        });
    </script>

    <script>
        var klass={
            init: function () {
                this.table = $('#item_table');
                this.initTable();
            },
            initTable: function () {
                this.table.on('click', '[data-role="passwd"]', function () {
                    var clipboard = new ClipboardJS(this);
                    clipboard.on('error', function (e) {
                        console.log('error',e)
                    });
                });


                this.table.on('click', '[data-role="username"]', function () {
                    var clipboard = new ClipboardJS(this);
                    clipboard.on('error', function (e) {
                        console.log('error',e)
                    });
                });

                this.table.on('click', '[data-role="url"]', function () {
                    var clipboard = new ClipboardJS(this);
                    clipboard.on('error', function (e) {
                        console.log('error',e)
                    })
                });

                this.table.on('click', '[data-role="delete-item"]', function () {
                    var id = $(this).attr("id");
                    if(delConfirm()){
                        $.ajax({
                            url: "{% url 'dashboard:item'%}?id="+id,
                            type: 'delete',
                            success: function () {
                                window.location.reload();
                            },
                            error: function (data) {
                                alert("删除失败,原因：" + data.statusText);
                            }
                        })
                    } else {
                        return
                    }
                });

                this.table.on('click', '[data-role="btn-cn-fields"]', function () {
                    var item_id = $(this).attr('item_id');
                    window.open('{% url "dashboard:fields" %}?item_id='+item_id,
                                '_blank',
                                'height=400,width=600,top=200,left=500,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=0,status=no');
             });


            }
        }


        $(document).ready(function () {

            klass.init()


        });

        function delInput(that) {
            $(that).parent().parent().remove();
        }

        function addInputReturn(that) {
                //添加减号
                var $content = "";
                $content += '<a href="#" onclick="delInput(this)" >';
                $content += '<span class="glyphicon glyphicon-minus"></span>';
                $content += '</a>';
                $(that).parent().append($content);

                //去除加号
                that.remove();

                //增加标签
                var html = "";
                html += '<div class="row">'
                html += '<div class="col-sm-5">'
                html += '<input type="text" name="key"  maxlength="64" class="form-control">'
                html += '</div>'
                html += '<div class="col-sm-5">'
                html += '<input type="text" name="value"   maxlength="64" class="form-control">'
                html += '</div>'
                html += '<div class="col-sm-1">'
                html += '<a href="#" id="dynamic" onclick="addInputReturn(this)"><span class="glyphicon glyphicon-plus"></span></a>'
                html += '</div>'
                html += '<hr>'
                html += '</div>'
                $("#add-fields").last().append(html);
        }

    </script>

{% endblock %}
